<template>
    <div>
        <!--<el-input placeholder="请输入内容" v-model="queryinfo" style="width: 350px" />
        <el-button
                class="btn_margin"
                type="primary"
                icon="el-icon-search"
                size="medium"
                @click="queryclick()"
        >查询</el-button
        >
        <el-button
                class="btn_margin"
                type="primary"
                icon="el-icon-delete"
                @click="deletechoose()"
                size="medium"
        >删除选中项</el-button
        >
        <el-button
                class="btn_margin"
                type="primary"
                icon="el-icon-star-off"
                size="medium"
                @click="toggleSelection(billList)"
        >反选选中
        </el-button>-->
        <el-button
                style="float: right;margin-bottom: 19px;"
                class="btn_margin"
                type="primary"
                icon="el-icon-document-add"
                size="medium"
                @click="addAcc"
        >新增账单</el-button
        >
        <el-table
                ref="multipleTable"
                :data="billList"
                style="width: 100%; margin-top: 10px"
                height="480"
                @selection-change="handleSelectionChange"
                v-loading="loadingAccount"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(255, 255, 255, 0.8)"
        >
            <!--<el-table-column type="selection" align="center" > </el-table-column>-->
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="收支">
                            <span>{{ props.row.manner }}</span>
                        </el-form-item>
                        <el-form-item label="金额">
                            <span>{{ props.row.money }}</span>
                        </el-form-item>
                        <el-form-item label="商品分类">
                            <span>{{ props.row.type_name }}</span>
                        </el-form-item>
                        <el-form-item label="支付方式">
                            <span>{{ props.row.payment }}</span>
                        </el-form-item>
                        <el-form-item label="创建时间">
                            <span>{{ props.row.create_time }}</span>
                        </el-form-item>
                        <el-form-item label="账单详情">
                            <span>{{ props.row.cost_details }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column label="收支" align="center" prop="manner" sortable>
            </el-table-column>
            <el-table-column label="金额" align="center" prop="money" sortable>
            </el-table-column>
            <el-table-column label="日期" align="center" prop="create_time" sortable>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="editAcc(scope.$index, scope.row)"
                    >编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="deleteAcc(scope.$index, scope.row)"
                    >删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <br />
        <el-pagination
                style="text-align: center"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="this.page"
                :page-sizes="[1,10, 20, 30, 40]"
                :page-size="this.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
        >
        </el-pagination>
        <el-dialog
                title="新增账单"
                :visible.sync="dialogFormVisible"
                width="25%"
                center
                custom-class="accountForm"
        >
            <el-form :model="accountList">
                <el-form-item label="方式" :label-width="formLabelWidth">
                    <el-select v-model="accountList.manner" placeholder="请选择" style="width:420px;">
                        <el-option
                                v-for="item in mannerOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.label"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="类别" :label-width="formLabelWidth">
                    <el-select
                            v-if="accountList.manner==='支出'"
                            v-model="accountList.type_name"
                            placeholder="请选择支出类别" style="width:420px;"
                    >
                        <el-option
                                v-for="item in typenameOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.label"
                        >
                        </el-option>
                    </el-select>
                    <el-select
                            v-if="accountList.manner==='收入'"
                            v-model="accountList.type_name"
                            placeholder="请选择收入类别" style="width:420px;"
                    >
                        <el-option
                                v-for="item in srOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.label"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="账单详情" :label-width="formLabelWidth">
                    <el-input v-model="accountList.cost_details" style="width:420px;"></el-input>
                </el-form-item>
                <el-form-item label="金额" :label-width="formLabelWidth">
                    <el-input v-model="accountList.money" style="width:420px;"></el-input>
                </el-form-item>
                <el-form-item label="支付方式" :label-width="formLabelWidth">
                    <el-select
                            v-model="accountList.payment"
                            placeholder="请选择活动区域" style="width:420px;"
                    >
                        <el-option
                                v-for="item in paymentOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.label"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="账单时间" :label-width="formLabelWidth">
                    <el-date-picker
                            v-model="accountList.create_time"
                            value-format="yyyy-MM-dd"
                            type="date"
                            placeholder="选择日期" style="width:420px;"
                    >
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="commitAcc">提交</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { commitAcc,editAcc ,deleteAcc,} from "@/api";
    import { mapState,mapGetters } from "vuex";
    export default {
        name: "account",
        data() {
            return {
                queryinfo:'',
                loadingAccount: false,
                page:1,
                pageSize:10,
                activeTab: "keepAccounts", // 默认展示记账页
                withdrawform: {
                    name: "",
                    money: "",
                    region: "",
                },
                savingform: {
                    is_delete: "false",
                    record_day: "",
                    record_desc: "",
                    price:"",
                    mg_id:"",
                },
                goalform: {
                    is_delete:"false",
                    goal_price:"",
                    user_id:"",
                    goal_desc:"",
                },
                accountList: {
                    manner: "", //方式：支出（1），收入（2）
                    type_name: "", //类别名称：购物（1），饮食（2），生活（3），缴费（4），其他（5）
                    cost_details: "", //账单详情描述
                    money: "", //金额
                    payment: "", //支付方式：现金（1），支付宝（2），微信（3），其它（4）
                    create_time: "", //创建时间
                    info_id: "", //关联用户表的id
                    _id:"",
                },
                mannerOptions: [
                    { id: "1", label: "支出" },
                    { id: "2", label: "收入" },
                ],
                typenameOptions: [
                    { id: "1", label: "购物" },
                    { id: "2", label: "饮食" },
                    { id: "3", label: "生活" },
                    { id: "4", label: "缴费" },
                    { id: "5", label: "其他" },
                ],
                srOptions: [
                    { id: "1", label: "消费找零" },
                    { id: "2", label: "劳动所得" },
                    { id: "3", label: "奖金" },
                    { id: "4", label: "其他" },
                ],
                paymentOptions: [
                    { id: "1", label: "现金" },
                    { id: "2", label: "支付宝" },
                    { id: "3", label: "微信" },
                    { id: "4", label: "其他" },
                ],
                formLabelWidth: "120px",
                dialogFormVisible: false,
                savingdialogFormVisible: false,
                withdrawdialogFormVisible: false,
                goaldialogFormVisible: false,
                multipleSelection:[],
                value: "",
                ids:[],
            };
        },
        mounted() {
            this.$store.dispatch("billList",{page:this.page,pageNum:this.pageSize,info_id:this.userInfo._id});

        },
        methods: {
            getList(){
                this.loadingAccount = true;
                this.$store.dispatch("billList",{page:this.page,pageNum:this.pageSize,info_id:this.userInfo._id});
                this.loadingAccount = false;
                this.$bus.$emit('statistics');
            },
            // 切换选项卡

            deletechoose(){
                /*if (this.ids.length == 0) {
                    this.$message.info("请选择需要删除的数据！");
                } else {
                    deleteAcc(this.ids).then(res=>{
                        if (res.data.code===200){
                            this.$message.success("删除成功");
                            this.billList.splice(index,1)
                        }
                    })
                }*/
            },
            queryclick(){
                /*// 携带input框的内容作为传参
                // this.$store.dispatch("billList",{page:this.page,pageNum:this.pageSize, search: this.queryinfo});
                queryAcc(this.queryinfo).then((res) => {
                    if(res.data.code ===200){
                        this.billList=res.data.data
                    }
                    console.log(res);
                })*/
            },
            toggleSelection(rows) {
                if (rows) {
                    this.ids = [];
                    rows.forEach((row) => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                        this.ids.push(row._id);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.ids = [];
                this.multipleSelection = val;
                this.multipleSelection.forEach((item) => {
                    this.ids.push(item._id);
                })
            },
            handleSizeChange(val) {
                this.pageSize=val;
                //console.log(`每页 ${val} 条`);
                this.$store.dispatch("billList",{page:this.page,pageNum:this.pageSize,info_id:this.userInfo._id});
            },
            handleCurrentChange(val) {
                this.page=val;
                this.$store.dispatch("billList",{page:this.page,pageNum:this.pageSize,info_id:this.userInfo._id});
            },
            addAcc() {
                this.dialogFormVisible = true;
                Object.keys(this.accountList).forEach((key) => {
                    this.accountList[key] = "";
                });
                this.accountList.manner='收入'
            },
            commitAcc() {
                let params = Object.assign(this.accountList, { is_delete: false,info_id: this.userInfo._id,money:this.accountList.money-0});
                if (this.accountList._id===""){
                    this.accountList._id=undefined;
                    commitAcc(params).then((res) => {
                        if (res.data.code === 200) {
                            this.$message.success("新增成功");
                            this.dialogFormVisible = false;
                            this.getList();
                        }
                    });
                }else {
                    this.accountList.createdAt=undefined;
                    this.accountList.updatedAt=undefined;
                    params=this.accountList;
                    editAcc(params).then((res) => {
                        if (res.data.code === 200) {
                            this.$message.success("修改成功");
                            this.dialogFormVisible = false;
                            this.getList();
                        }
                    });
                }
            },
            editAcc(index,item){
                this.accountList=item;
                this.dialogFormVisible=true;
            },
            deleteAcc(index,item){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center:true
                }).then(() => {
                    deleteAcc(item._id).then(res=>{
                        if (res.data.code===200){
                            this.$message.success("删除成功");
                            this.billList.splice(index,1)
                            this.$bus.$emit('statistics');
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

        },

        computed: {
            ...mapState({
                //从数据仓库中取出数据
                billList: (state) => state.bill.billList.note,
                total:(state) => state.bill.billList.total,
            }),
            ...mapGetters(['userInfo'])
        },
    };
</script>

<style scoped lang="scss">
.btn_margin {
    margin-left: 19px;
}

.demo-table-expand {
    font-size: 0;

}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-left: 30px;
    margin-bottom: 0;
    width: 50%;
}

.el-input__inner{
    width: 420px;
}

::v-deep .el-select .el-input{
    width: 420px;
}
</style>